<!--
 * @author Santa Antilles
 * @description 食堂、所有菜品界面都需要用到的每一个菜品的小条目，用于构成类似安卓ListView一样的东西
 * @date 2023/12/27-00:25:04
 * -->
<template>
  <div class="dish-single-bar-wrapper" @click="passId">
    <div class="dish-img">
      <img :src="src" alt="暂无图片"/>
    </div>
    <div class="right-dish-info">
      <div class="plain-dish-info">
        <div class="on-sale-play" v-if="showSale">
          <h3>{{dishName}}</h3>
          <div class="inner-original-and-discount">
            <span class="deprecated-original-price">原价：{{originalPrice}}元</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>现价：{{salesPrice}}元</span>
          </div>
          <div class="cuisine-info">
            <p>来自：{{cuisine}}</p>
          </div>
        </div>
        <div class="on-sale-play" v-if="!showSale">
          <h3>{{dishName}}</h3>
          <div class="inner-original-and-discount">
            <span>价格：{{originalPrice}}元</span>
          </div>
          <div class="cuisine-info">
            <p>来自：{{cuisine}}</p>
          </div>
        </div>
      </div>
      <div class="right-red-triangle" v-show="showSale"/>
      <div class="on-sale-info" v-show="showSale">OnSale!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DishSingleBar",
  props:{
    showSale: false,
    src: String,
    id: String,
    cuisine: String,
    dishName: String,
    originalPrice: String,
    salesPrice: String
  },
  methods:{
    passId(){
      this.$emit("idClick", this.id);
    }
  }
}
</script>

<style scoped>
h3{
  font-family: 黑体;
  font-weight: bold;
}
.right-dish-info{
  position: relative;
  width: 60%;
}
.right-red-triangle{
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-top: 80px solid red;
}
.dish-single-bar-wrapper{
  min-width: 400px;
  height: 180px;
  max-width: 600px;
  width: auto;
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  cursor: pointer;
  background-color: #f9f9ff;
}
.dish-img{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
}
.on-sale-info{
  position: absolute;
  top: 16px;
  right: 0;
  transform: rotate(45deg);
  color: white;
}
.dish-img img{
  width: 150px;
  height: 150px;
  margin: 0 20px;
}
.plain-dish-info{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
}
.deprecated-original-price{
  text-decoration: line-through;
}
.on-sale-play{
  width: 100%;
  align-items: center;
  justify-content: center;
}
.on-sale-play h3{
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-original-and-discount{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cuisine-info{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>